<template>
  <el-row>
    <el-form
      :model="addForm"
      label-width="100px"
      :show-message="false"
      style="display: inline-block"
      :rules="addFormRules"
      ref="addForm"
      
    >
      <el-form-item
        label="优惠券类型:"
        prop="type"
        style="width: 600px"
      >
        <el-radio
          v-model="addForm.type"
          :label="item"
          v-for="item in dict.types"
          :key="item"
          :disabled="formDisabled"
        >{{ item }}</el-radio>
      </el-form-item>
      <el-form-item
        label="优惠券分类:"
        prop="classify"
        style="width: 600px"
      >
        <el-radio
          v-model="addForm.classify"
          :label="item"
          :disabled="formDisabled"
          v-for="item in dict.classifications"
          :key="item"
        >{{ item }}</el-radio>
      </el-form-item>
      <el-form-item
        label="优惠券名称:"
        prop="name"
        style="width: 300px; display: inline-block"
      >
        <el-input
          placeholder="请输入优惠券名称"
          clearable
          :disabled="formDisabled"
          v-model="addForm.name"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="总量:"
        prop="gross"
        style="width: 200px; display: inline-block"
      >
        <el-input
          placeholder="请输入总量"
          style="width: 130px"
          oninput="value=value.replace(/[^0-9]/g,'')"
          clearable
          :disabled="formDisabled"
          v-model="addForm.gross"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="面额:"
        prop="denomination"
        style="width: 200px; display: inline-block"
      >
        <el-input
          placeholder="请输入面额"
          style="width: 130px"
          oninput="value=value.replace(/[^0-9.]/g,'')"
          clearable
          :disabled="formDisabled"
          v-model="addForm.denomination"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="门槛:"
        prop="sill"
        style="width: 300px; display: inline-block"
      >
        <el-radio
          v-model="addForm.sill"
          :label="item"
          :disabled="formDisabled"
          v-for="item in dict.sills"
          :key="item"
        >{{ item }}</el-radio>
      </el-form-item>
      <el-form-item
        label="满减金额:"
        v-if="addForm.sill == '满减'"
        prop="discountPrice"
        style="width: 300px; display: inline-block"
      >
        <el-input
          placeholder="请输入满减金额"
          oninput="value=value.replace(/[^0-9.]/g,'')"
          clearable
          :disabled="formDisabled"
          v-model="addForm.discountPrice"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="有效期:"
        prop="valid"
        style="width: 600px"
      >
        <el-radio
          v-model="addForm.valid"
          :label="item"
          :disabled="formDisabled"
          v-for="item in dict.valids"
          :key="item"
        >{{ item }}</el-radio>
      </el-form-item>
      <el-form-item
        label="有效期范围:"
        v-if="addForm.valid == '时间范围'"
        prop="effectiveTimeStart"
        :disabled="formDisabled"
        style="width: 580px; display: inline-block"
      >
        <el-date-picker
          v-model="addForm.validStartTime"
          type="datetime"
          placeholder="有效期开始日期"
          clearable
          :disabled="formDisabled"
          style="width: 220px"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
        -
        <el-date-picker
          v-model="addForm.validEndTime"
          type="datetime"
          placeholder="有效期结束日期"
          clearable
          :disabled="formDisabled"
          style="width: 220px"
          :default-time="'23:59:59'"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="过期天数:"
        v-if="addForm.valid == '领取后多少天过期'"
        prop="expireDay"
        style="width: 200px; display: inline-block"
      >
        <el-input
          placeholder="请输入过期天数"
          style="width: 130px"
          :disabled="formDisabled"
          oninput="value=value.replace(/[^0-9]/g,'')"
          clearable
          v-model="addForm.expireDay"
        ></el-input>
      </el-form-item>
      <el-row>
        <el-form-item
          label="适用门店:"
          prop="storeIds"
          style="width: 300px; display: inline-block"
        >
          <job-shop
            v-model="addForm.storeIds"
            :disabled="addForm.id?true:false"
            placeholder="适用门店"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-radio-group
          v-model="selectType"
          style="margin-bottom: 20px"
        >
          <el-radio-button :label="'Part'">可使用项目</el-radio-button>
          <el-radio-button :label="'Project'">可使用配件</el-radio-button>
        </el-radio-group>

        <el-row v-if="selectType == 'Part'">
          <el-row>
            <el-col :span="12">优惠券可使用项目列表</el-col>
            <el-col
              :span="12"
              align="right"
            >
              <el-button
                type="primary"
                @click="checkProject"
                :disabled="formDisabled"
              >项目选择</el-button>
            </el-col>
          </el-row>
          <el-divider content-position="center"></el-divider>
          <data-table
            :value="tableProjectList"
            :has-action="!formDisabled"
            :totalCount="tableProjectList.length"
            :table-column-attributes="tableColumnProjectAttributes"
            :isShowPage="true"
            :width="160"
            :localPage="true"
          >
            <template #action="{ row }">
              <i
                class="el-icon-delete"
                title="删除"
                style="color: red; cursor: pointer"

                @click="deletetableProject(row)"
              ></i>
            </template>
          </data-table>
        </el-row>

        <el-row v-if="selectType == 'Project'">
          <el-row>
            <el-col :span="12">优惠券可使用配件列表</el-col>
            <el-col
              :span="12"
              align="right"
            >
              <el-button
                type="primary"
                @click="accessoriesCheck"
                :disabled="formDisabled"
              >添加配件</el-button>
            </el-col>
          </el-row>
          <el-divider content-position="center"></el-divider>
          <data-table
            :value="tableFittingList"
            :has-action="!formDisabled"
            :totalCount="tableFittingList.length"
            :table-column-attributes="tableColumnFittingAttributes"
            :isShowPage="true"
            :width="160"
            :localPage="true"
          >
            <template #action="{ row }">
              <i
                class="el-icon-delete"
                title="删除"
                style="color: red; cursor: pointer"

                @click="deletetableFittingList(row)"
              ></i>
            </template>
          </data-table>
        </el-row>
      </el-row>

      <el-row v-if="!formDisabled">
        <el-col
          :span="24"
          align="right"
        >
          <el-button
            type="primary"
            style="margin: 20px auto 0"
            @click="onSubmit"
          >保存</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog
      v-if="projectVisible"
      title="项目选择"
      :visible.sync="projectVisible"
      :append-to-body="true"
      width="800px"
      @close="projectDialogClose"
      :before-close="projectHandleClose"
    >
      <SelectProject @getList="getSelectProject" />
    </el-dialog>
    <el-dialog
      v-if="accessoriesVisible"
      title="配件选择"
      :visible.sync="accessoriesVisible"
      :append-to-body="true"
      width="1000px"
      @close="projectDialogClose"
      :before-close="projectHandleClose"
    >
      <SelectAccessories @partsList="getSelectAccessories" />
    </el-dialog>
  </el-row>
</template>

<script>
import { SelectProject } from '@/components/index'
import SelectAccessories from '@/components/SelectAccessories'
import ElRow from 'element-ui/packages/row/src/row'
import baseMixin from '@/mixins/base'
import { getDict } from '@/utils'
import { orderPage } from '@/api/after-sale/record/order'
import { mounted } from 'vuedraggable'
export default {
  components: { ElRow, SelectProject, SelectAccessories },
  name: 'DialogDataForm',
  props: {
    value: {
      type: Object,
      default: () => ({}),
    },
    menus: {
      type: Object,
    },
  },
  mixins: [baseMixin({})],
  data () {
    return {
      projectVisible: false, //项目选择弹窗
      accessoriesVisible: false, //配件选择弹窗
      //表单项
      dict: {
        coupon: [],
        types: ['赠送优惠券', '自定义优惠券'],
        classifications: ['通用', '售前券', '售后券'],
        sills: ['无', '满减'],
        valids: ['时间范围', '领取后多少天过期'],
      },
      addForm: {
        classify: '通用', //	string优惠券分类
        denomination: 0, //	number面额
        discountPrice: 0, //	number满减金额
        expireDay: 0, //	integer($int32)过期天数
        gross: 0, //	integer($int32)总量
        name: '', //	string优惠券名称
        sill: '无', //	string门槛
        storeIds: '', //	string适用门店id
        type: '赠送优惠券', //	string优惠券类型
        valid: '时间范围', //	string有效期
        validEndTime: '', //	string($date-time)有效期结束时间
        validStartTime: '', //	string($date-time)有效期开始时间
        carPartsIds: [], //	string项目配件ids
        carProjectIds: [], //	string项目ids
        id: '', //	integer($int32)优惠券id
      },
      timeList: [], //时间范围选择
      tableProjectList: [], //项目选择数据
      tableFittingList: [], //配件选择
      tableColumnProjectAttributes: [
        { name: '项目名', value: 'projectName', type: 'text' },
        { name: '项目介绍', value: 'remark', type: 'text' },
        {
          name: '项目工时',
          value: 'workHours',
          type: 'render',
          render: (row, value) => {
            return `${value}小时`
          },
        },
        { name: '项目类型', value: 'projectDictValue', type: 'text' },
      ],
      tableColumnFittingAttributes: [
        { name: '配件编号', value: 'partsCode', type: 'text' },
        { name: '配件名称', value: 'partsName', type: 'text' },
        { name: '配件类别', value: 'partsDictValue', type: 'text' },
      ],
      selectType: 'Part',
      addFormRules: {
        name: [{ required: true, trigger: 'blur' }],
        classification: [{ required: true, trigger: 'blur' }],
        type: [{ required: true, trigger: 'blur' }],
        ruleAmount: [{ required: true, trigger: 'blur' }],
        isRule: [{ required: true, trigger: 'blur' }],
        isEffective: [{ required: true, trigger: 'blur' }],
      },
      formDisabled:false,
    }
  },
  watch: {
    value: {
      deep: true,
      handler: function (newValue, oldValue) {
        this.setAddForm()
      },
    },
  },
  async mounted () {
    this.setAddForm()
    if(this.value.id){
      this.formDisabled=true
    }
  },
  methods: {
    setAddForm () {
      if (this.value.id) {
        let { carPartsIds, carProjectIds, ...data } = this.value
        this.addForm = data;
        this.tableProjectList = carProjectIds || []
        this.tableFittingList = carPartsIds || []
        this.addForm.carPartsIds = []
        this.addForm.carProjectIds = []
      }
    },
    projectHandleClose () {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.projectDialogClose()
        })
        .catch((_) => { })
    },
    projectDialogClose () {
      this.projectVisible = false
      this.accessoriesVisible = false
    },
    //配件选择
    accessoriesCheck () {
      this.accessoriesVisible = true
    },
    //项目选择
    checkProject () {
      this.projectVisible = true
    },
    //删除配件列表
    deletetableFittingList (row) {
      this.tableFittingList.splice(
        this.tableFittingList.findIndex((item) => {
          return row.id == item.id
        }),
        1
      )
    },
    //删除车辆列表某项
    deletetableProject (row) {
      this.tableProjectList.splice(
        this.tableProjectList.findIndex((item) => {
          return row.id == item.id
        }),
        1
      )
    },
    filterList (type, list) {
      let isExist = []
      let fildName = `${type == 1 ? 'tableProjectList' : 'tableFittingList'}`
      if (this.addForm.id) {
        //项目过滤
        if (this[fildName].length > 0) {
          this[fildName].forEach((item) => {
            list.forEach((item2, index) => {
              if (item2.id == item.id) {
                list.splice(index, 1)
              }
            })
          })
          this[fildName] = Object.assign([], this[fildName].concat(list))
        }
      } else {
        this[fildName] = list
      }
      this.projectDialogClose()
    },
    //项目选择
    getSelectProject (list) {
      this.filterList(1, list)
    },
    //配件选择
    getSelectAccessories (list) {
      this.filterList(2, list)
    },
    onSubmit () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          const options = this.addForm
          options.carProjectIds = []
          options.carPartsIds = []
          this.tableProjectList.forEach((item) =>
            options.carProjectIds.push(item.id)
          )
          this.tableFittingList.forEach((item) =>
            options.carPartsIds.push(item.id)
          )
          options.carProjectIds = options.carProjectIds.join()
          options.carPartsIds = options.carPartsIds.join()

          if (!this.value.id) {
            this.$emit('operate', options, 'send')
          } else {
            options.id = this.value.id
            this.$emit('operate', options, 'update')
          }
        } else {
          return false
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
</style>

